<!--右侧边栏-->
<div class="col-sm-3 col-12 postSide">
    <!--搜索框-->
    <!--            <div class="search-bar row">-->
    <!--                <div class="col-8">-->
    <!--                    <input type="text" class="form-control" id="keyword" placeholder="请输入关键字"/>-->
    <!--                </div>-->
    <!--                <div class="col-4" style="text-align:right;">-->
    <!--                    <button type="button" class="btn btn-primary">搜索</button>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--最新文章-->
    <div class="side article-panel">
        <div class="col-12 tip"><i class="fa fa-coffee" aria-hidden="true"
                                   style="color: orange;padding-right: 10px"></i>热门文章
        </div>
        <div id="side_most_article">
            <!--ajax动态填充-->
        </div>
    </div>
    <div class="side article-panel" style="margin-top: 35px">
        <div class="col-12 tip"><i class="fa fa-coffee" aria-hidden="true"
                                   style="color: orange;padding-right: 10px"></i>文章推荐</div>
        <div id="side_recommend_article">
            <!--ajax动态填充-->
        </div>
    </div>
</div>


<script>
    // 原生JavaScript的语句方式，没有使用jquery使用fetch api的方式发送ajax请求
    document.addEventListener('DOMContentLoaded', function () {
        fetchMostPopularPosts();
    });

    function fetchMostPopularPosts() {
        fetch('/api/most_recommend')
            .then(response => response.json())
            .then(data => renderPopularPosts(data))
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('side_most_article').innerHTML =
                    '<p class="error">加载热门文章失败</p>';
                document.getElementById('side_recommend_article').innerHTML =
                    '<p class="error">加载推荐文章失败</p>';
            });
    }

    function renderPopularPosts(posts) {
        const container_most = document.getElementById('side_most_article');
        const container_recommend = document.getElementById('side_recommend_article');

        if (posts[0].length === 0) {
            container_most.innerHTML = '<p>暂无热门文章</p>';
            return;
        }
        if (posts[1].length === 0) {
            container_recommend.innerHTML = '<p>暂无推荐文章</p>';
            return;
        }

        let html1 = '<ul class="popular-posts-list">';
        let html2 = '<ul class="popular-posts-list">';
        posts[0].forEach((post,index) => {
            html1 += `
        <li>
            <a href="/article/${post.id}">${index+1}.${post.headline.slice(0,24)}....</a>
        </li>`;
        });
        html1 += '</ul>';

        posts[1].forEach((post,index) => {
            html2 += `
        <li>
            <a href="/article/${post.id}">${index+1}.${post.headline.slice(0,24)}....</a>
        </li>`;
        });
        html2 += '</ul>';

        container_most.innerHTML = html1;
        container_recommend.innerHTML = html2;
    }


</script>